<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>07_component_refs</title>
</head>
<body>
<br>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */
    // 1.定义组件
    class MyComponent extends React.Component {
        // 构造器
        constructor(props) {
            super(props);

            // 替换自定义方法
            this.showInput = this.showInput.bind(this);
            this.handleBlur = this.handleBlur.bind(this);
        }

        // 自定义方法
        showInput() {
            const input = this.refs.content;
            // alert(input.value);
            alert(this.input.value);
        }

        handleBlur(event) { // 所有事件都有一个event形参
            // 失去焦点事件
            alert(event.target.value);
        }

        render() {
            // 第一种写法：官方不建议
            // 第二种写法：把当前标签赋值给组件对象的input属性
            return (
                <div>
                    <input type="text" ref="content"/>&nbsp;&nbsp;
                    <input type="text" ref={(input => this.input = input)}/>&nbsp;&nbsp;
                    <button onClick={this.showInput}>提示输入</button>
                    &nbsp;&nbsp;
                    <input type="text" placeholder="失去焦点提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }

    // 2. 渲染组件标签
    ReactDOM.render(<MyComponent/>, document.getElementById("example"));
</script>
</body>
</html>
